<template>
	<view style="background-color: white;">
		<view>
			<view class="top" :style="{ height: topHeight + 'px' }">
			        <view class="top-item" @click="returns">
			          <image src="/static/ret.png" alt="" />
			          <text>在线建卡</text>
			        </view>
			      </view>

			<!-- 在线建卡提示 -->
			<view class="live">在线建卡</view>
			<view class="mess">无院内就诊卡号，初次就诊选择在线建卡</view>

			<!-- 输入表单 -->
			<view class="inps">
				<view class="card">
					<input type="tel" placeholder="请输入身份证号" v-model="myCard" />
					<view class="line"></view>
				</view>
				<view class="name">
					<input type="text" placeholder="请输入身份证姓名" v-model="myName" />
					<view class="line"></view>
				</view>
				<view class="tel">
					<input type="tel" placeholder="请输入手机号" v-model="myTel" @input="validatePhoneInput" />
					<view class="line"></view>
				</view>
				<view class="relationship">
					<input type="text" placeholder="请输入和您的关系" v-model="myRelationship" />
					<view class="line"></view>
				</view>
				<view class="address">
					<input type="text" placeholder="请输入地址" v-model="myAddress" />
					<view class="line"></view>
				</view>
				<view class="code">
					<input type="number" placeholder="请输入就诊卡号" v-model="myCode" />
					<view class="line"></view>
				</view>
			</view>

			<!-- 性别选择 -->
			<!-- 性别选择 -->
			<view class="gender-options">
				<radio-group :value="selectedGender" @change="onGenderChange">
					<!-- 男性选项 -->
					<radio value="1"><text>男</text></radio>
					<!-- 女性选项 -->
					<radio style="margin-left: 20px;" value="2"><text>女</text></radio>
				</radio-group>
			</view>


			<!-- 立即建卡按钮 -->
			<view class="set" @click="set">立即建卡</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	// 响应式数据
	const myCard = ref('');
	const myName = ref('');
	const myTel = ref('');
	const myRelationship = ref('');
	const myAddress = ref('');
	const myCode = ref('');
	const gender = ref('1'); // 性别，默认男 (1)
const topHeight = ref(0);  // 用于存储动态计算的top高度

  // 在组件挂载时获取设备信息
  onMounted(() => {
    const systemInfo = uni.getSystemInfoSync();
    const navBarHeight = systemInfo.statusBarHeight;  // 获取状态栏的高度
    topHeight.value = navBarHeight + 44;  // 导航栏高度加50px
    console.log('导航栏高度:', navBarHeight);
    console.log('动态计算的top高度:', topHeight.value);
  });
	// 获取存储的数据
	const responseData = uni.getStorageSync('data');
	let dataObj = null;
	try {
		dataObj = JSON.parse(responseData); // 尝试将数据解析为对象
	} catch (e) {
		console.log('数据解析失败', e);
	}

	// 打印存储的数据
	console.log('Fetched Data:', dataObj);

	if (!dataObj || !dataObj.data) {
		console.log('没有找到存储的数据或数据格式不正确');
	}

	// 获取 user_id，如果没有则默认设置为 156
	const ids = dataObj ? dataObj.data.id : 156; // 如果ids为空，使用默认值156
	console.log('User ID:', ids); // 打印 user id

	// 返回上一页
	const returns = () => {
		uni.reLaunch({
			url: '/pages/add/add'
		});
	};

	// 显示错误提示
	const showError = (message) => {
		uni.showToast({
			title: message, // 确保 message 是字符串
			icon: 'none', // 只显示文字，没有图标
			duration: 2000, // 显示时长
		});
	};

	// 提交建卡请求
	const set = () => {
		// 手机号和身份证号的格式校验
		const reg_mobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
		const reg_idcard = /^(?:\d{15}|\d{17}[\dXx])$/;

		// 验证输入框是否为空或格式是否正确
		if (!myCard.value) {
			console.log('身份证号为空');
			showError('请输入身份证号');
			return;
		}
		if (!reg_idcard.test(myCard.value)) {
			console.log('身份证号格式不正确');
			showError('身份证号格式不正确');
			return;
		}
		if (!myName.value) {
			console.log('姓名为空');
			showError('请输入身份证姓名');
			return;
		}
		if (!myTel.value) {
			console.log('手机号为空');
			showError('请输入手机号');
			return;
		}
		if (!reg_mobile.test(myTel.value)) {
			console.log('手机号格式不正确');
			showError('手机号格式不正确');
			return;
		}
		if (!myRelationship.value) {
			console.log('关系为空');
			showError('请输入和您的关系');
			return;
		}
		if (!myAddress.value) {
			console.log('地址为空');
			showError('请输入地址');
			return;
		}
		if (!myCode.value) {
			console.log('就诊卡号为空');
			showError('请输入就诊卡号');
			return;
		}

		// 验证单选框是否已选中
		if (!gender.value) {
			console.log('性别未选择');
			showError('请选择性别');
			return;
		}

		// 将性别值转换为接口需要的格式
		const genderValue = gender.value; // 1为男，2为女

		// 发送请求
		uni.request({
			url: 'https://yiliao.kuxia.top/app/Visit/add',
			method: 'POST',
			data: {
				user_id: ids, // 使用默认的ids值
				code: myCard.value,
				relationship: myRelationship.value,
				nickname: myName.value,
				tel: myTel.value,
				address: myAddress.value,
				datetime: '2004-12-03',
				sex: gender.value, // 性别值 1 男，2 女
				card: myCode.value,
			},
			success: (res) => {
				if (res.data.code === 1) {
					showError('添加成功！');

					// 保存新建的就诊人信息到本地存储
					const newPatientData = {
						nickname: myName.value,
						code: myCard.value,
						tel: myTel.value,
						relationship: myRelationship.value,
						address: myAddress.value,
						card: myCode.value,
						sex: gender.value,
					};

					// 将新建的就诊人数据保存到 localStorage
					const existingData = uni.getStorageSync('data');
					const updatedData = existingData ? JSON.parse(existingData) : {
						data: {
							children: []
						}
					};

					updatedData.data.children.push(newPatientData); // 将新数据添加到已有数据中

					uni.setStorageSync('data', JSON.stringify(updatedData));

					// 延时3秒返回上一页，并刷新数据
					setTimeout(() => {
						uni.$emit('refreshData');
						uni.navigateBack({
							delta: 1 // 返回上一页，delta是返回的层级数
						});

					}, 3000);

				} else {
					showError(res.data.message || '添加失败');
				}
			},
			fail: (err) => {
				showError('请求失败，请稍后重试！');
			}
		});
	};

	// 手机号输入验证
	const validatePhoneInput = (e) => {
		// 获取输入值
		let inputValue = e.detail.value;
		// 检查是否有非数字字符
		if (!/^\d*$/.test(inputValue)) {
			console.log(1); // 只打印 1 如果输入非法字符
			showError('请重新输入正确格式')
		}
	};
</script>



<style scoped>
	 .top {
	    background-color: #00daca;
	    width: 100%;
	    color: white;
	    font-size: 21px;
	    line-height: 3rem;
	    font-weight: 600;
	    display: flex;
	    align-items: center;
	    padding-left: 15px;
	  }
	
	  .top-item {
	    display: flex;
	    align-items: center;
	    margin-top: 30px;
	  }
	
	  .top-item image {
	    width: 16px;
	    height: 16px;
	    margin-right: 10px;
	  }
	
	  .top-item text {
	    font-size: 20px;
	  }
	.live {
		margin-top: 35px;
		margin-left: 20px;
		font-size: 22px;
		color: #393939;
	}

	.mess {
		margin-top: 15px;
		margin-left: 20px;
		font-size: 14px;
		color: #949494;
	}

	.inps {
		margin-top: 30px;
		margin-left: 20px;
	}

	input {
		border: none;
		background: none;
		padding: 0;
		margin: 0;
		box-shadow: none;
		outline: none;
		font: inherit;
		color: inherit;
		width: 100%;
		box-sizing: border-box;
	}

	.line {
		width: 94%;
		background-color: #c6c6c6;
		height: 1px;
		margin-top: 10px;
	}

	.name,
	.tel,
	.relationship,
	.address,
	.code {
		margin-top: 20px;
	}

	.gender-options {
		display: flex;
		align-items: center;
		margin-left: 20px;
		margin-top: 20px;
	}

	.gender-option {
		display: inline-block;
		margin-right: 20px;
		font-size: 16px;
		cursor: pointer;
		user-select: none;
	}

	.set {
		width: 90%;
		background-color: #00daca;
		color: white;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 20px;
		border-radius: 8px;
		margin: 30px auto;
	}
</style>